<template>
  <Card>
    <Row>
      <Table :loading="loading" stripe border :columns="tableColumns" :data="tableData"></Table>
      <page-temp :total="total" :current="page.pageNo" :size="page.pageSize" @changePage='changePage'></page-temp>
      <Modal v-model="visible" width='800' :mask-closable="false" :closable="false" title="提交审核">
        <Card>
          <Row>
            <Col span="17" offset="3">
            <Form ref="verify" :model="verify" :rules="rules" :label-width="120">
              <Row>
                <Col>
                <FormItem prop="verifyExplain" style="width:100%;" label="请填写提交说明">
                  <Input v-model="verify.verifyExplain" type="textarea" :rows="4" placeholder="请输入" />
                </FormItem>
                </Col>
              </Row>
            </Form>
            </Col>
          </Row>

        </Card>
        <div slot="footer">
          <Button @click="cancel">取消</Button>
          <Button @click="apply" class="m-l-md" type="primary">确认</Button>
        </div>
      </Modal>
    </Row>
  </Card>
</template>
<script>
import dict from "_c/dict/dict.vue";
import dictSpan from "_c/dict/dict-span.vue";

import Api from "@/api/game-apply";
import { getDict } from "@/api/configure";
const api = new Api();
// 赛事管理
export default {
  components: {
    dict,
    dictSpan
  },
  props: {
    model: {
      type: Object,
      default: {}
    }
  },
  watch: {
    model: {
      handler(n) {
        this.pageModel = this.model;
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      loading: true,
      total: 0,
      visible: false,
      pageModel: {},
      page: {
        pageSize: this.$config.PAGE_SIZE,
        pageNo: 1
      },
      tableColumns: [
        {
          title: "序号",
          width: 65,
          align: "left",
          render: (h, params) => {
            return h(
              "span",
              this.page.pageSize * (this.page.pageNo - 1) + params.index + 1
            );
          }
        },
        {
          title: "赛事名称",
          key: "eventsName",
          render: (h, params) => {
            let self = this;
            let title = self.$config.userName(
              params.row.eventsName,
              params.row.eventsEnglishName
            );
            return h(
              "a",
              {
                on: {
                  click: () => {
                    let self = this;
                    self.$router.push({
                      path: "/game-apply-management/match/" + params.row.applyId
                    });
                  }
                },
                domProps: {
                  title
                }
              },
              title
            );
          }
        },
        {
          title: "赛事类型",
          key: "kindCode",
          width: 85,
          render: (h, params) => {
            return h(dictSpan, {
              props: { code: "ZGX_SSDJ", value: params.row.kindCode }
            });
          }
        },
        {
          title: "赛事级别",
          key: "gradeCode",
          ellipsis: true,
          width: 85,
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: "ZGX_BSJB",
                parentCode: params.row.kindCode,
                value: params.row.gradeCode
              }
            });
          }
        },
        {
          title: "比赛类型",
          key: "eventsType",
          width: 85,
          render: (h, params) => {
            return h(dictSpan, {
              props: { code: "ZGX_BSLX", value: params.row.eventsType }
            });
          }
        },

        {
          title: "赛事时间",
          key: "startTime",
          render: (h, params) => {
            let self = this;
            let title = self.$config.getDate(
              params.row.startTime,
              params.row.endTime
            );
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "赛事计划",
          key: "planField",
          width: 85,
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#FF9933"
                }
              },
              params.row.planField + "场"
            );
          }
        },
        {
          title: "申请类型",
          key: "operationType",
          width: 85,
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: "ZGX_SSCZLX",
                value: params.row.operationType
              }
            });
          }
        },
        {
          title: "审核状态",
          key: "verifyStatus",
          width: 85,
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: "ZGX_SSSHZT",
                value: params.row.verifyStatus
              },
              class: "verify-status-" + params.row.verifyStatus
            });
          }
        },
        {
          title: "操作",
          key: "action",
          align: "left",
          width: 205,
          render: (h, params) => {
            let self = this;
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    display: params.row.verifyStatus === "0" ? "" : "none"
                  },
                  on: {
                    click: () => {
                      this.verify.verifyId = params.row.verifyId;
                      this.verify.eventsId = params.row.eventsId;
                      this.visible = true;
                    }
                  }
                },
                "提交审核"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      self.$router.push({
                        path: `/game-apply-management/edit/${params.row.applyId}`
                      });
                    }
                  }
                },
                params.row.verifyStatus === "0" &&
                  params.row.operationType !== "3"
                  ? "编辑"
                  : "查看"
              ),
              h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "您确定要删除这条数据吗?",
                    transfer: true
                  },
                  on: {
                    "on-ok": () => {
                      //删除数据
                      this.del(params.row.applyId);
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      style: {
                        marginRight: "5px",
                        display: params.row.verifyStatus === "0" ? "" : "none"
                      },
                      props: {
                        size: "small",
                        placement: "top"
                      }
                    },
                    "删除"
                  )
                ]
              ),
              // h(
              //   "Button",
              //   {
              //     props: {
              //       type: "primary",
              //       size: "small"
              //     },
              //     style: {
              //       marginRight: "5px"
              //     },
              //     on: {
              //       click: () => {
              //         self.$router.push({
              //           path: `/game-apply-management/game-record-card/${
              //             params.row.eventsId
              //           }`
              //         });
              //       }
              //     }
              //   },
              //   "查看审核记录"
              // )
            ]);
          }
        }
      ],
      tableData: [],
      verify: { verifyStatus: 1 },
      rules: {
        verifyExplain: [
          { required: true, message: "请输入" },
          {
            max: this.$config.TAREA_SIZE,
            message: `最多输入${this.$config.TAREA_SIZE}个字符数字`
          }
        ]
      }
    };
  },
  mounted() {
    let self = this;
    self.fetchListStart();
  },
  methods: {
    // 获取字典数据
    getVal(expression) {
      let self = this;
      eval(expression);
    },
    // 获取数据
    fetchListStart() {
      let self = this;
      self.page = { ...self.page, ...self.pageModel, pageNo: 1 };
      if (self.page.niandu) {
        self.page.niandu = self.$moment(self.page.niandu).format("YYYY");
      }
      self.fetchList();
    },
    fetchList() {
      this.loading = true;
      api
        .queryList(this.page)
        .then(data => {
          this.loading = false;
          this.tableData = data.list || [];
          this.total = data.count || 0;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 分页
    changePage(pageNum) {
      this.page.pageNo = pageNum;
      this.fetchList();
    },
    reset() {
      let self = this;
      Object.keys(self.pageModel).forEach(x => {
        self.pageModel[x] = null;
      });
      this.fetchListStart();
    },
    del(applyId) {
      api.del(applyId).then(data => {
        if (data) {
          this.fetchList();
        }
      });
    },
    // 提交申请
    apply() {
      let self = this;
      self.$refs["verify"].validate(valid => {
        if (valid) {
          self.loading = true;
          // 审核状态变为待审核
          // self.verify.verifyStatus='1';
          api
            .submit(self.verify)
            .then(data => {
              self.cancel();
              this.fetchListStart();
            })
            .catch(error => {
              self.cancel();
              self.loading = false;
            });
        }
      });
    },
    // 取消提交申请
    cancel() {
      let self = this;
      self.$refs["verify"].resetFields();
      self.visible = false;
    }
  }
};
</script>
